// pages/usercharge/usercharge.js
import * as echarts from '../components/ec-canvas/echarts'
import http from '../../http'

let oneComponent;
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		allData: {},
		lightChange: 0
	},
	/**
	 * 页面的初始数据
	 */
	data: {
		ec: {
			lazyLoad: true
		},
		option: {},
		xAxisData: [],
		yAxisData: [],
	},
	methods: {
		gain() {
			oneComponent = this.selectComponent('#mychart-dom-bar')
			let xList = [];
			let yList = [];
			for (let i = 0; i < 7; i++) {
				let oneDay = i * 24 * 60 * 60 * 1000;
				let date = new Date(Date.now() - oneDay);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, "0");
				let day = date.getDate().toString().padStart(2, "0");
				let startDate = year + "-" + month + "-" + day;
				xList = [startDate, ...xList];
				yList.push(0);
			}
			console.log(this.properties.allData.lampPowerChart);
			let powerData =
				this.properties.allData.lampPowerChart &&
				this.properties.allData.lampPowerChart.xList &&
				this.properties.allData.lampPowerChart.xList.length != 0 ?
				this.properties.allData.lampPowerChart : {
					xList: xList,
					yList: yList
				};
			this.setData({
				xAxisData: powerData.xList,
				yAxisData: powerData.yList
			}, () => {
				oneComponent.init((canvas, width, height) => {
					const chart = echarts.init(canvas, null, {
						width: width,
						height: height
					});
					this.initChart(chart);
					// return chart
				});
			})
		},
		initChart(chart) {
			var option = {
				// animation: false,
				// 提示配置
				tooltip: {
					show: true,
					trigger: "axis",
					formatter: function (params) {
						return (
							"时间 : " +
							params[0].name +
							"\n" +
							params[0].marker +
							"耗电电流 : " +
							params[0].value +
							"A"
						);
					},
				},
				// 位置
				grid: {
					left: "10%",
					right: "10%",
					top: "10%",
					bottom: "15%",
					containLabel: true,
					show: "true",
					borderWidth: "0",
				},
				// 配置x轴
				xAxis: {
					boundaryGap: false,
					maxInterval: 1,
					data: this.data.xAxisData,
					//轴线
					axisLine: {
						show: false,
					},
					//   文字
					axisLabel: {
						show: true,
						// interval: this.data.xAxisData.length - 2, //相邻多少数据
						fontSize: 8,
						color: "",
					},
				},
				// 配置y轴
				yAxis: {
					// name: "单位(A)",
					type: "value",
					maxInterval: 1,
					//网络线
					splitLine: {
						show: false,
						lineStyle: {
							color: "#e3e9f3",
						},
					},
					//轴线
					axisLine: {
						show: false,
					},
					//   文字
					axisLabel: {
						show: false,
						// fontWeight: 900,
						fontSize: 14,
						color: "#ceddf4",
					},
				},
				// 配置线条和数据
				series: {
					itemStyle: {
						normal: {
							lineStyle: {
								color: "#ead9c5",
								width: 2,
								shadowOffsetX: 0, // 折线的X偏移
								shadowOffsetY: 0, // 折线的Y偏移
								shadowWidth: 10,
								shadowBlur: 20, // 折线模糊
								// shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
								shadowColor: "#ead9c5",
							},
							color: "#ead9c5" /*图例(legend)的颜色,不是图例说明文字的颜色*/ ,
						},
					},
					// symbol: "none" /*去掉小圆点*/,
					type: "line",
					data: this.data.yAxisData,
					smooth: true, //显示为平滑的曲线,
					areaStyle: {}, //填充样式
				},
				dataZoom: [
					// {
					//   id: "dataZoomX",
					//   type: "slider",
					//   xAxisIndex: [0],
					//   filterMode: "empty",
					// },
					//   {
					//     id: "dataZoomY",
					//     type: "slider",
					//     yAxisIndex: [0],
					//     filterMode: "empty",
					//   },
				],
			};
			chart.setOption(option);
		},
	},

	observers: {
		'lightChange': function (val) {
			if (val > 0) {
				this.gain()
			}
		}
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	lifetimes: {
		attached() {

		},
	},
})